 <template>
  <div class="toplistchild">
    <el-container>
      <el-aside width="240px">
        <div class="toplistside">
          <div style="margin-top: 40px; width: 100%; height: 1000px">
            <el-menu
              :default-active="this.$route.path"
              class="el-menu-vertical-demo"
              text-color="rgb(0,0,0)"
              active-text-color="#ffd04b"
              router
            >
              <el-menu-item>
                <span slot="title"><strong>云音乐特色榜</strong></span>
              </el-menu-item>
              <el-menu-item index="/discover/toplist/biaosheng">
                <img
                  src="@/assets/images/biaosheng.jpg"
                  alt=""
                  width="40px"
                  height="40px"
                />
                <span slot="title">飙升榜</span>
              </el-menu-item>
              <el-menu-item index="/discover/toplist/newsongs">
                <img
                  src="@/assets/images/newsongs.jpg"
                  alt=""
                  width="40px"
                  height="40px"
                />
                <span slot="title">新歌榜</span>
              </el-menu-item>
              <el-menu-item index="/discover/toplist/original">
                <img
                  src="@/assets/images/original.jpg"
                  alt=""
                  width="40px"
                  height="40px"
                />
                <span slot="title">原创榜</span>
              </el-menu-item>
              <el-menu-item index="/discover/toplist/hotsongs">
                <img
                  src="@/assets/images/hotsongs.jpg"
                  alt=""
                  width="40px"
                  height="40px"
                />
                <span slot="title">热歌榜</span>
              </el-menu-item>
              <el-menu-item>
                <span slot="title"><strong>全球媒体榜</strong></span>
              </el-menu-item>
              <el-menu-item index="/discover/toplist/original">
                <img
                  src="@/assets/images/heijiao.jpg"
                  alt=""
                  width="40px"
                  height="40px"
                />
                <span slot="title">黑胶VIP爱听榜</span>
              </el-menu-item>
              <el-menu-item >
                <img
                  src="@/assets/images/shuochang.jpg"
                  alt=""
                  width="40px"
                  height="40px"
                />
                <span slot="title">云音乐说唱榜</span>
              </el-menu-item>
              <el-menu-item index="/discover/toplist/original">
                <img
                  src="@/assets/images/gudian.jpg"
                  alt=""
                  width="40px"
                  height="40px"
                />
                <span slot="title">云音乐宝典榜</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-aside>
      <el-main
        style="
          width: 1000px;
          padding-top: 10px;
          height: 4350px;
          border-right: solid 1px;
        "
      >
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-container>
  </div>
</template>
  
<script>
export default {
  name: "playlistd",
};
</script>

<style>
.toplistchild {
  width: 1100px;
  /* height: 7306.52px; */

  margin-left: 22%;
  background-color: rgb(249, 249, 249);
}
 .tctable {
   border: solid 1px;
   border-top:none ;
 }
 .tcelmain {
   border-right:1px solid ;
 }
 .toplistside {
   border:solid 1px;
 }
 .skyblue {
    color: rgb(12, 115, 194);
}
.active {
    height:70px;
}
.active1 {
   background-color: rgb(247, 247, 247);
}

 .el-main {
    background-color: rgb(255,255,255);
    height: 1800px;
    line-height: 33px;
    text-align: left;
  }
  .tlheader{
    height: 158px;
    width: 740px;
    margin: 40px;

  }
   .tlfooter {
    width: 670px;
    background-color: rgb(255,255,255);
    height: 900px;
    margin: 0 30px 40px 40px;
   }
   .tlfooter_title {
       width: 670px;
       height: 33px;
       border-bottom: solid rgb(194, 12, 12) 2px;
   }
   th {
       height: 30px;
   }
   table {
       background-color: rgb(255,255,255);
       font-weight: normal;
       font-size: 12px;
   }
    .toplistside {
        width: 240px;
        height: 1976px;
    }
    .tlsul li{
        width:220px;
        height: 42px;
        padding: 10px 0 10px 20px;
    }
    .active01{
      background-color: rgb(230, 230, 230);
    }
</style>